<template>
    <div class="users-retained" v-loading="loading">
        <div class="rocket-input-wrap">
            <span class="rocket-label-name">日期</span>
            <el-date-picker
                @change="getList(1)"
                style="width: 300px;"
                v-model="date"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <span class="rocket-label-name mar-lt">维度</span>
            <el-select @change="userSourceChange" style="width:150px;" v-model="userSourceVal">
                <el-option label="全部" value=""></el-option>
                <el-option label="已注册" :value="0"></el-option>
                <el-option label="未注册" :value="1"></el-option>
            </el-select>
            <span class="rocket-label-name mar-lt">渠道</span>
            <el-select @change="userStatusChange" style="width:150px;" v-model="userStatusVal">
                <el-option label="全部" value=""></el-option>
                <el-option label="已注册" :value="0"></el-option>
                <el-option label="未注册" :value="1"></el-option>
            </el-select>
            <span class="rocket-label-name mar-lt">显示数据项</span>
            <el-select multiple @change="loginChange" style="width:350px;" v-model="loginChangeVal">
                <el-option label="全部" value=""></el-option>
                <el-option label="已注册" :value="0"></el-option>
                <el-option label="未注册" :value="1"></el-option>
            </el-select>
        </div>
        <div class="table-box">
            <div class="table-title-box">
                <div class="table-title"></div>
                <div class="table-title">新增用户</div>
                <!-- <div class="table-title" v-else>活跃用户</div> -->
                <div class="table-title">1天后</div>
                <div class="table-title">2天后</div>
                <div class="table-title">3天后</div>
                <div class="table-title">4天后</div>
                <div class="table-title">5天后</div>
                <div class="table-title">6天后</div>
                <div class="table-title">7天后</div>
                <div class="table-title">14天后</div>
                <div class="table-title">30天后</div>
            </div>

            <div class="table-content-box">
                <div class="table-content">汇总数据</div>
                <div class="table-content" v-for="(_item, _index) in totalData" :key="_index">
                    <span>{{_item.count}}</span>
                    <span v-if="_index !== 0"> / </span>
                    <span v-if="_index !== 0">{{_item.scale | percent}}</span>
                </div>
            </div>
        </div>
        
        <div class="table-box">
            <div class="table-title-box">
                <div class="table-title">时间</div>
                <div class="table-title">新增用户</div>
                <!-- <div class="table-title" v-else>活跃用户</div> -->
                <div class="table-title">1天后</div>
                <div class="table-title">2天后</div>
                <div class="table-title">3天后</div>
                <div class="table-title">4天后</div>
                <div class="table-title">5天后</div>
                <div class="table-title">6天后</div>
                <div class="table-title">7天后</div>
                <div class="table-title">14天后</div>
                <div class="table-title">30天后</div>
            </div>
            
            <div class="table-content-box" v-for="(item, index) in channelList" :key="index">
                <!-- <div class="table-content">{{ index === 'ios' ? 'ios' : index === 'prohuawei' ? '华为' : index === 'provivo' ? 'vivo' : index === '其它' ? '其它' : '-' }}</div> -->
                <div class="table-content">{{ index }}</div>
                <div class="table-content" v-for="(_item, _index) in item" :key="_index">
                    <span>{{_item.count}}</span>
                    <span v-if="_index !== 0"> / </span>
                    <span v-if="_index !== 0">{{_item.scale | percent}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
    data () {
        return {
            loading: false,
            list: [],
            total: 0,
            channel: null,
            fromList: [],
            pickerOptions: {
                // disabledDate (time) {
                //     return time.getTime() > (new Date().getTime() - 3600 * 1000 * 24)
                // }
            },
            status: 1,
            date: [], // 时间
            totalData: [], // 汇总数据
            channelList: [],
            loginChangeVal: null,
            userSourceVal: null,
            userStatusVal: null
        }
    },
    created () {
        let param = JSON.parse(this.$route.query.queryParams || '{}')
        this.status = this.$route.query.status
        this.getList(param)
        this.getChannelList()
    },

    watch: {
        status (val) {
            window.localStorage.setItem('_userDataWeidu', val)
        }
    },

    methods: {
        loginChange(val) {
            this.loginChangeVal = val
        },
        userSourceChange(val) {
            this.userSourceVal = val
        },
        userStatusChange(val) {
            this.userStatusVal = val
        },
        // 获取渠道留存数据
        async getChannelList () {
            if (this.loading) return
            this.loading = true

            let params = {
                status: this.$route.query.status,
                queryDate: this.$route.query.queryDate
            }
            let res = await this.$http.get('/data/selectUserChannelKeep', {
                params
            })
            if (res.code === '0') {
                this.channelList = res.data || []
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },
        // 获取数据
        async getList (params) {
            // if (this.loading) return
            // this.loading = true
            let res = await this.$http.get('/data/selectUserKeep', {
                params
            })
            if (res.code === '0') {
                this.list = res.data || []
                this.totalData = res.data[this.$route.query.clickIndex].userKeepOneDataVoList
                this.total = res.count
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            // this.loading = false
        }
    },

    filters: {
        timeInit (val) {
            if (val) {
                return formatDate(val, 'YYYY-MM-DD')
            } else {
                return '-'
            }
        },

        percent (val) {
            if (val) {
                return parseInt(val * 1000) / 10 + '%'
            } else {
                return '0%'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .users-retained {
        .table-box {
            margin: 20px 0;
            border: 1px #EEE solid;
            .table-title-box {
                width: 100%;
                display: flex;
                align-items: center;
                background: #fafafa;
                .table-title {
                    &:first-child {
                        width: 15%;
                    }
                    width: 8.5%;
                    border-right: 1px #EEE solid;
                    font-size: 13px;
                    color: rgba(0, 0, 0, 0.85);
                    font-weight: 500;
                    text-align: center;
                    padding: 15px 0;
                    &:last-child {
                        border-right: none;
                    }
                }
            }

            .table-content-box {
                display: flex;
                align-items: center;
                border-top: 1px #EEE solid;
                width: 100%;
                &:hover {
                    background-color: rgba(186, 231, 255, .3);
                }
                .table-content {
                    &:first-child {
                        width: 15%;
                    }
                    width: 8.5%;
                    font-size: 12px;
                    padding: 10px 0;
                    text-align: center;
                    border-right: 1px #EEE solid;
                    &:nth-child(3) {
                        background-color: rgba(186, 231, 255, 1);
                    }
                    &:nth-child(4) {
                        background-color: rgba(186, 231, 255, .8);
                    }
                    &:nth-child(5) {
                        background-color: rgba(186, 231, 255, .6);
                    }
                    &:nth-child(6) {
                        background-color: rgba(186, 231, 255, .4);
                    }
                    &:nth-child(7) {
                        background-color: rgba(186, 231, 255, .35);
                    }
                    &:nth-child(8) {
                        background-color: rgba(186, 231, 255, .3);
                    }
                    &:nth-child(9) {
                        background-color: rgba(186, 231, 255, .25);
                    }
                    &:nth-child(10) {
                        background-color: rgba(186, 231, 255, .15);
                    }
                    &:nth-child(11) {
                        background-color: rgba(186, 231, 255, .1);
                        border-right: none;
                    }
                }
            }
        }
    }
</style>

<style lang="scss">
    .input-seclect {
        .el-select-dropdown__wrap {
            // height: 500px;
            max-height: 500px;
        }
    }
</style>
